<template>
  <div class="titleContent">
    <div class="titleName" :style="!icon ? { 'margin-top': '20px' } : {}">
      <div
        class="block"
        :style="{ 'margin-left': marginLeft + 'px' }"
        v-if="!icon"
      ></div>
      <span v-else :class="[icon, 'icon-color', 'pr-1']" :style="iconStyle">{{
        fontIcon
      }}</span>
      <span class="collapse-title" :style="titleStyle">{{ title }}</span>
    </div>
  </div>
</template>

<script setup name="TitleName">
const props = defineProps({
  title: {
    type: String,
    required: true,
    default: '标题'
  },
  marginLeft: {
    type: String,
    default: '60'
  },
  /* 
  icon 为class名 可以去https://icones.netlify.app/collection/all 取类名
  */
  icon: {
    type: String,
    default: null
  },
  /* 
  iconVal 可以用字体图标
  */
  fontIcon: {
    type: String,
    default: null
  },
  iconStyle: {
    type: Object || Array,
    default: () => {
      return {}
    }
  },
  titleStyle: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
</script>

<style lang="scss" scoped>
.titleContent {
  .titleName {
    display: flex;
    align-items: center;
    font-size: 16px;
  }
  .block {
    width: 5px;
    display: inline-block;
    // height: 16px;
    background-color: rgb(62, 146, 255);
    margin-right: 8px;
  }
  .icon-color {
    color: #409eff;
  }
  .collapse-title {
    font-size: 16px;
    font-weight: 600;
  }
}
</style>
